<template>
  <div class="lists" v-if="FenLeiList_List">
    <navigator
      class="list-item"
      v-for="item in FenLeiList_List"
      :url="`/pages/Look/index?id=${item._id}`"
    >
      <image :src="item.smallPicurl"></image>
    </navigator>
  </div>

  <div class="loginLayout" v-else>
    <uni-section title="指定加载图标样式 - 按平台自动选择样式" type="line">
      <uni-load-more iconType="auto" status="loading" showIcon="true" />
    </uni-section>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getFenLeiListAPI, getUserDownloadAPI } from "../../api/apis";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
// 分类列表数据
const FenLeiList_List = ref([]);
const FenLeiList = async () => {
  let res;
  if (queryParams.classid) res = await getFenLeiListAPI(queryParams);
  if (queryParams.type) res = await getUserDownloadAPI(queryParams);

  FenLeiList_List.value = [...FenLeiList_List.value, ...res.data.data];
  // 将数据保存到本地缓存里
  uni.setStorageSync("FenLeiList_List", FenLeiList_List.value);
};

const queryParams = {
  pageNum: 1,
  pageSize: 12,
};
onLoad((e) => {
  let { id = null, name = null, type = null } = e;
  if (type) queryParams.type = type;
  if (id) queryParams.classid = id;

  // 修改导航栏标题
  uni.setNavigationBarTitle({
    title: name,
  });
  // 放这里的原因：setup最先执行，但是页面还没加载完成，所以放到onLoad里面执行。
  FenLeiList();
});

// 触底加载更多
onReachBottom(() => {
  queryParams.pageNum++;
  FenLeiList();
});
</script>

<style scoped lang="scss">
.loginLayout {
  padding: 30rpx 0;
}

.lists {
  display: flex;
  flex-wrap: wrap;
  gap: 5rpx;
  padding: 5rpx;
  width: 100%;
  // border: 1px solid red;

  .list-item {
    width: 245rpx;
    height: 545rpx;
    background-color: pink;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>